<template>
    <el-form ref="formInstance" @submit.native.prevent  :rules="rules" status-icon :model="loginUser" label-width="100px"
             class="loginForm sign-in-form">
      <el-form-item label="账号" prop="account">
        <el-input prefix-icon="el-icon-user" v-model="loginUser.account" placeholder="Enter Account....."></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input prefix-icon="el-icon-lock" v-model="loginUser.password" type="password" placeholder="Enter Password....."></el-input>
      </el-form-item>
      <el-form-item>
        <el-button native-type="submit" @click="handleLogin()" type="primary" class="submit-btn">登录</el-button>
      </el-form-item>
<!--      <el-form-item class="tip-area">-->
<!--        <p>忘记密码?<a href="#">立即找回</a></p>-->
<!--      </el-form-item>-->
    </el-form>
</template>
<script lang="ts">
import {defineComponent, ref} from 'vue'
import {useRouter} from'vue-router'
import {successMessage,errorMessage} from '/@/utils/message'
import { storageSession } from "/@/utils/storage";
import {useStore} from 'vuex'
import { getLogin} from "/@/api";
export default defineComponent({
  name: '',
  props: {
    loginUser: {
      type: Object,
      required: true
    },
    rules: {
      type: Object,
      required: true
    }
  },
  setup: function ({loginUser}) {
    interface resType{
      code:string,
      message:string
    }
    const router=useRouter()
    const store=useStore()
    const formInstance=ref<HTMLFormElement|null>(null)
    const handleLogin =  () => {
      formInstance.value?.validate(async (valid: any) => {
        if (valid) {
           let res=await getLogin({
              username:loginUser.account,
              password:loginUser.password
            }) as resType
           if(res.code==='200'){
             successMessage(res.message)
             // 设置用户登录状态，记录用户信息
             storageSession.setItem('info',{
               username: "杨师傅",
               accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
             })
             // 初始化用户可访问路由列表
             const authorityArray:Array<string>=['/welcome','/template/formulate','/template/upload','/query/index','/chart/index','/options/index']
             // 通过vuex记录可访问路由列表，用于主菜单页面过滤路由
             await store.dispatch('authority/filterRoute',authorityArray)
             successMessage('登录成功')
             // 跳转路由到主路由
             await router.push("/")
           }else{
             errorMessage(res.message)
           }
          return true
        } else {
          errorMessage('输入格式错误，请重新输入！！！')
          return false
        }
      })
    }
    return {
      handleLogin,
      formInstance
    }

  }
})
</script>

<style lang='scss' scoped>
/* 控制login & register显示 */
form {
  padding: 0 5rem;
  transition: all 0.2s 0.7s;
  overflow: hidden;
}

form.sign-in-form {
  z-index: 3;
  //transform: translate(0,80%);
}

.loginForm {
  margin-top: 20px;
  background-color: aliceblue;
  padding: 40px 40px 30px 0;
  border-radius: 30px;
  box-shadow: 13px 13px 30px rgba(103, 103, 107, 0.9);
}

/* register */

.submit-btn {
  width: 100%;
}

//.tip-area {
//  transform: translateX(50%);
//}
</style>
